
<template>
  <div class="main">
    <div class="maintop">
      中铁十二局电子签名系统
      </div>
      <div class="boxtit1">徐州地铁SGTJ6107标</div>
    <div class="container">
      <ul class="box" :style="{ top }">
        <li v-for="(item,index) in arr" :key="index">
          <img
            class="child1"
            :src="'http://101.132.154.10:8189/upload/find_img?img_url=' + item.imgurl"
            alt
          />
          <img
            class="child2"
            :src="'http://101.132.154.10:8189/upload/find_img?img_url=' + item.img2url"
            alt
          />
        </li>
      </ul>
    </div>
    <div class="dibu" @click="tosign"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img2url: "",
      imgurl: "",
      arr: [],
      activeIndex: 0
    };
  },
  name: "HelloWorld",

  methods: {
    tosign() {
      this.$router.push("/");
    }
  },
  created() {
    let that = this;
    var parameter = {
      createtime: "string",
      id: 0,
      img2url: "string",
      imgurl: "string"
    };
    $.ajax({
      type: "POST",
      url: "http://101.132.154.10:8189/upload/find",
      contentType: "application/json",
      data: JSON.stringify(parameter),

      success: function(data) {
        console.log(data);
        that.arr = data;
      }
    });

    setInterval(function() {
        var num =Math.floor(that.arr.length/6.1)*6;
      //  console.log(num) 
      
      if(that.arr.length<=18){
            that.activeIndex = 0;
        }else{
            if (that.activeIndex < ( num-17)*25+140 ) {
        that.activeIndex += 1;
      } else {
        that.activeIndex = 0;
      }
        }
    }, 100);
  },
  computed: {
    top() {
      return -this.activeIndex * 1.8 + "px";
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
img {
  border: 0;
  vertical-align: middle;
}
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../assets/images/back1.png) no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.boxtit1{
  margin-top: 0.9rem;
  text-align: center;
  width: 4.5rem;
  height: 0.4rem;
  font-size: 0.25rem;
  line-height: 0.25rem;
  font-weight: 700;
  color: #9dc9cf;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  display: flex;
  align-items: center;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color:rgba(0,237,248,1);
  letter-spacing: 5px;
  background: url(../assets/images/yu.png) no-repeat;
  background-size: 100% 100%;
}
.maintop {
  position: absolute;
  width: 100%;
  height: 0.9rem;
  font-size: 0.40rem;
  line-height: 0.9rem;
  font-weight: 700;
  color: #9dc9cf;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  display: flex;
  /* align-items: center; */
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(255, 229, 53, 1);
  letter-spacing: 5px;
  /* background: blueviolet; */
}
.container {
  
  width: 16rem;
  height: 8rem;
  margin-top: 0.1rem;
  /* background: yellowgreen; */
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.container .box {
  width: 16.4rem;
  height: 20000rem;
  /* background: blueviolet; */
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
  /* position: relative; */
}
.container .box li {
  float: left;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.57rem;
  position: relative;
  /* background: yellowgreen; */
}
.container .box .child1 {
  border-radius: 10%;
  position: absolute;
  width: 2rem;
  height: 2rem;
}

.container .box .child2 {
  width: 1rem;
  height: 1rem;
  position: absolute;
  margin-top: 1rem;
  margin-left: 0.5rem;
}
.dibu {
  margin-top: 0.28rem;
  width: 2rem;
  height: 0.8rem;
  background: url(../assets/images/fanhui.png) no-repeat;
  background-size: 100% 100%;
}
</style>